$(document).ready(function () {
    if (getStorage('userRoles') == 'manager') {
        $("#basic").show();
        $("#basic1").hide();
        createHeatMap();
        initTravellerToday();
        initTravellerYear();
        initMainChart(0);
        initdjqChart(0);
        initairSevChart(0);
        initshopSalesChart(0);
        initwechatChart(0);
        initclientChart(0);
        initgoodsSalesChart(0);
        initparkChart();
    } else {
        setTimeout(function () {
            $("#basic1").show();
            $("#basic").hide();
        }, 1000)
    }

})
$(".chooseItem").click(function () {
    if ($(this).hasClass('chooseCheck')) return;
    $(this).parent().children().removeClass('chooseCheck');
    $(this).addClass('chooseCheck');
    if ($(this).parent().attr('data-index') == 0) {
        initMainChart($(this).index());
    } else if ($(this).parent().attr('data-index') == 1) {
        initdjqChart($(this).index())
    } else if ($(this).parent().attr('data-index') == 2) {
        initairSevChart($(this).index())
    } else if ($(this).parent().attr('data-index') == 3) {
        initshopSalesChart($(this).index())
    } else if ($(this).parent().attr('data-index') == 4) {
        initwechatChart($(this).index())
    } else if ($(this).parent().attr('data-index') == 5) {
        initclientChart($(this).index())
    } else if ($(this).parent().attr('data-index') == 6) {
        initgoodsSalesChart($(this).index())
    }
})


function initTravellerToday() {
    var TravellerTodayChart = echarts.init(document.getElementById('travellerToday'));
    var option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        grid: {
            show: true
        },
        title: {
            text: '今日各时段旅客数量',
            textStyle: {
                color: '#94C2D9'
            }
        },
        xAxis: {
            data: echartsJson[0].xAxis.data
        },
        yAxis: {},
        series: [{
            name: '旅客数量',
            type: 'bar',
            data: echartsJson[0].series.data,
            itemStyle: {
                normal: {
                    barBorderRadius: 8,
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 20,
                    color: function (params) {
                        var colorList = echartsJson[0].series.colorList
                        return colorList[params.dataIndex];
                    },
                }
            }
        }]
    };
    TravellerTodayChart.setOption(option);
}

function initTravellerYear() {
    var TravellerTodayChart = echarts.init(document.getElementById('travellerYear'));
    var option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        title: {
            text: '全年旅客量变化趋势',
            textStyle: {
                color: '#94C2D9'
            }
        },
        grid: {
            show: true
        },
        xAxis: {
            data: echartsJson[1].xAxis.data
        },
        yAxis: {},
        series: [{
            name: '旅客数量',
            type: 'line',
            data: echartsJson[1].series.data,
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 20,
                    color: '#94C2D9',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(57,126,140,1)'
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(57,126,140,0.5)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(57,126,140,0)'
                            }
                        ]
                    ),
                }
            }
        }]
    };
    TravellerTodayChart.setOption(option);
}

function random(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
}

function initMainChart(index) {
    var mainChart = echarts.init(document.getElementById('mainChart'));

    if (index == 0) {
        xAxis_data = echartsJson[2].xAxis[0].data
        series_data = echartsJson[2].series[0].datas
    } else if (index == 1) {
        xAxis_data = echartsJson[2].xAxis[1].data
        series_data = echartsJson[2].series[1].datas
    } else if (index == 2) {
        xAxis_data = echartsJson[2].xAxis[2].data
        series_data = echartsJson[2].series[2].datas
    }
    option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },

        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['进出人流(进)', '进出人流(出)', '注册人数', '付款人数'],
            textStyle: {
                color: '#94C2D9',
            },
            left: '0',
            top: '0',
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
            show: true
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis_data,
            axisLabel: {
                interval: 0,
            }
        },
        yAxis: {
            type: 'value',
        },
        series: [{
                name: '进出人流(进)',
                type: 'line',
                stack: '总量',
                data: series_data[0].data
            },
            {
                name: '进出人流(出)',
                type: 'line',
                stack: '总量',
                data: series_data[1].data
            },
            {
                name: '注册人数',
                type: 'line',
                stack: '总量',
                data: series_data[2].data
            },
            {
                name: '付款人数',
                type: 'line',
                stack: '总量',
                data: series_data[3].data
            }
        ]
    };

    mainChart.setOption(option);

}

function initdjqChart(index) {
    var djqChart = echarts.init(document.getElementById('djqChart'));

    if (index == 0) {
        series_data = echartsJson[3].series[0].datas
    } else if (index == 1) {
        series_data = echartsJson[3].series[1].datas
    } else if (index == 2) {
        series_data = echartsJson[3].series[2].datas
    }
    option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['新增粉丝', '累计粉丝', '活跃粉丝'],
            textStyle: {
                color: '#94C2D9'
            },
            left: '0',
            top: '0',
        },
        xAxis: [{
            type: 'category',
            data: echartsJson[3].xAxis.data
        }],
        yAxis: [{
            type: 'value'
        }],
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
            show: true
        },
        series: [{
                name: '新增粉丝',
                type: 'bar',
                barGap: 0,
                data: series_data[0].data,
                itemStyle: {
                    normal: {
                        barBorderRadius: 8,
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20,
                        color: 'rgb(198,92,65)',
                    }
                }
            },
            {
                name: '累计粉丝',
                type: 'bar',
                barGap: 0,
                data: series_data[1].data,
                itemStyle: {
                    normal: {
                        barBorderRadius: 8,
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20,
                        color: 'rgb(240,170,114)',
                    }
                }
            },
            {
                name: '活跃粉丝',
                type: 'bar',
                barGap: 0,
                data: series_data[2].data,
                itemStyle: {
                    normal: {
                        barBorderRadius: 8,
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20,
                        color: 'rgb(242,210,142)'
                    }
                }
            }
        ]
    }
    djqChart.setOption(option);
}

function initwechatChart(index) {
    var wechatChart = echarts.init(document.getElementById('wechatChart'));

    if (index == 0) {
        series_data = echartsJson[6].series[0].datas
    } else if (index == 1) {
        series_data = echartsJson[6].series[1].datas
    } else if (index == 2) {
        series_data = echartsJson[6].series[2].datas
    }
    option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['净增粉丝', '累计粉丝', '访问粉丝'],
            textStyle: {
                color: '#94C2D9'
            },
            left: '0',
            top: '0',
        },
        xAxis: [{
            type: 'category',
            data: echartsJson[6].xAxis.data
        }],
        yAxis: [{
            type: 'value'
        }],
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
            show: true
        },
        series: [{
                name: '新增粉丝',
                type: 'bar',
                barGap: 0,
                data: series_data[0].data,
                itemStyle: {
                    normal: {
                        barBorderRadius: 8,
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20,
                        color: 'rgb(198,92,65)',
                    }
                }
            },
            {
                name: '累计粉丝',
                type: 'bar',
                barGap: 0,
                data: series_data[1].data,
                itemStyle: {
                    normal: {
                        barBorderRadius: 8,
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20,
                        color: 'rgb(240,170,114)',
                    }
                }
            },
            {
                name: '活跃粉丝',
                type: 'bar',
                barGap: 0,
                data: series_data[2].data,
                itemStyle: {
                    normal: {
                        barBorderRadius: 8,
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20,
                        color: 'rgb(242,210,142)'
                    }
                }
            }
        ]
    }
    wechatChart.setOption(option);
}

function initairSevChart(index) {
    var airSevChart = echarts.init(document.getElementById('airSevChart'));
    if (index == 0) {
        series_data = echartsJson[4].series[0].data
    } else if (index == 1) {
        series_data = echartsJson[4].series[1].data
    } else if (index == 2) {
        series_data = echartsJson[4].series[2].data
    }
    option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        tooltip: {
            trigger: 'axis',

        },
        legend: {
            data: ['访问量'],
            textStyle: {
                color: '#94C2D9'
            },
            left: '0',
            top: '0',
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
            show: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'category',
            data: echartsJson[4].yAxis.data
        },
        series: [{
            name: '访问量',
            type: 'bar',
            data: series_data,
            itemStyle: {
                normal: {
                    barBorderRadius: 8,
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 20,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                                offset: 0,
                                color: '#479EAE'
                            },
                            {
                                offset: 1,
                                color: '#84C7A7'
                            }
                        ]
                    ),

                }
            }
        }]
    }
    airSevChart.setOption(option);
}

function initshopSalesChart(index) {
    var shopSalesChart = echarts.init(document.getElementById('shopSalesChart'));
    if (index == 0) {
        series_data = echartsJson[5].series[0].data
    } else if (index == 1) {
        series_data = echartsJson[5].series[1].data
    } else if (index == 2) {
        series_data = echartsJson[5].series[2].data
    }
    option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        tooltip: {
            trigger: 'axis',

        },
        legend: {
            data: ['销量'],
            textStyle: {
                color: '#94C2D9'
            },
            left: '0',
            top: '0',
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
            show: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'category',
            data: echartsJson[5].yAxis.data
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: series_data,
            itemStyle: {
                normal: {
                    barBorderRadius: 8,
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 20,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                                offset: 0,
                                color: '#479EAE'
                            },
                            {
                                offset: 1,
                                color: '#84C7A7'
                            }
                        ]
                    ),

                }
            }
        }]
    }
    shopSalesChart.setOption(option);
}


function initgoodsSalesChart(index) {
    var goodsSalesChart = echarts.init(document.getElementById('goodsSalesChart'));
    if (index == 0) {
        series_data = echartsJson[5].series[0].data
    } else if (index == 1) {
        series_data = echartsJson[5].series[1].data
    } else if (index == 2) {
        series_data = echartsJson[5].series[2].data
    }
    option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        tooltip: {
            trigger: 'axis',

        },
        legend: {
            data: ['销量'],
            textStyle: {
                color: '#94C2D9'
            },
            left: '0',
            top: '0',
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
            show: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'category',
            data: echartsJson[8].yAxis.data
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: series_data,
            itemStyle: {
                normal: {
                    barBorderRadius: 8,
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 20,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                                offset: 0,
                                color: '#479EAE'
                            },
                            {
                                offset: 1,
                                color: '#84C7A7'
                            }
                        ]
                    ),

                }
            }
        }]
    }
    goodsSalesChart.setOption(option);
}

function initclientChart(index) {
    var clientChart = echarts.init(document.getElementById('clientChart'));
    if (index == 0) {
        series_data = echartsJson[7].series[0].datas;
    } else if (index == 1) {
        series_data = echartsJson[7].series[1].datas
    } else if (index == 2) {
        series_data = echartsJson[7].series[2].datas
    }
    option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            y: 'center',
            data: echartsJson[7].legend.data,
            textStyle: {
                color: '#94C2D9'
            },
            right: '0'
        },
        series: [{
            name: '客源地',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: series_data
        }]
    };
    clientChart.setOption(option);

}

function initparkChart() {
    var parkChart = echarts.init(document.getElementById('parkChart'));
    option = {
        backgroundColor: 'rgb(47,57,58)',
        textStyle: {
            color: '#94C2D9'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            y: 'center',
            data: echartsJson[9].legend.data,
            textStyle: {
                color: '#94C2D9'
            },
            right: '0'
        },
        series: [{
            name: '车位',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: echartsJson[9].series.data
        }]
    };
    parkChart.setOption(option);

}

//加载热力图
function createHeatMap() {
    var heatmapInstance = h337.create({
        container: document.querySelector('#thermodynamic')
    });
    var points = [];
    var max = 0;
    var width = $("#thermodynamic").width();
    var height = $("#thermodynamic").height();
    var len = 50;

    while (len--) {
        var val = Math.floor(Math.random() * 100);
        max = Math.max(max, val);
        var point = {
            x: random(20, 80) * width / 100,
            y: random(20, 80) * height / 100,
            value: val
        };
        points.push(point);
    }
    // heatmap data format
    var data = {
        max: max,
        data: points
    };
    heatmapInstance.setData(data);
    setInterval(function () {
        var points = [];
        var max = 0;
        var width = $("#thermodynamic").width();
        var height = $("#thermodynamic").height();
        var len = 50;

        while (len--) {
            var val = Math.floor(Math.random() * 100);
            max = Math.max(max, val);
            var point = {
                x: random(20, 80) * width / 100,
                y: random(20, 80) * height / 100,
                value: val
            };
            points.push(point);
        }
        // heatmap data format
        var data = {
            max: max,
            data: points
        };
        heatmapInstance.setData(data);
    }, 10000)

}